<template>
	<div class="exchange w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>兑换记录</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<el-select v-model="searchSelect" placeholder="订单状态" class="th_2" @change="getTableList">
					<el-option label="订单状态" value=""></el-option>
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<div class="msearch">
					<input placeholder="请输入商品名、订单号、兑换者名字" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column prop="orderNo" label="商品编号" width="130"></el-table-column>
				<el-table-column prop="itemName" label="商品名称"></el-table-column>
				<el-table-column prop="userName" label="兑换者" width="80"></el-table-column>
				<el-table-column prop="orderAmountTotal" label="消耗学分" width="80"></el-table-column>
				<el-table-column prop="createTimeStr" label="兑换时间" width="150"></el-table-column>
				<el-table-column prop="sellerSate" label="状态" width="80"></el-table-column>
				<el-table-column label="操作" width="120">
					<template slot-scope="scope">
						<div class="status" v-if="scope.row.sellerSate=='已结束'">
							<el-button @click="handleStatu4(scope.row)" v-if="exchange.dhjl_seen">查看</el-button>
							<el-button @click="handleDelete(scope.row)" v-if="exchange.dhjl_del" class="red">删除</el-button>
						</div>
						<el-button @click="handleStatu1(scope.row)" v-else-if="scope.row.sellerSate=='未发货' && exchange.dhjl_delivery">发货</el-button>
						<el-button @click="handleStatu2(scope.row)" v-else-if="scope.row.sellerSate=='已发货' && exchange.dhjl_logistics">物流信息</el-button>
						<el-button @click="handleStatu3(scope.row)" v-else-if="scope.row.sellerSate=='未自提' && exchange.dhjl_self">自提信息</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<!--发货弹窗-->
		<div class="kuaidi" v-show="kuaidiStutas1">
			<p class="title">填写物流信息</p>
			<div class="kuaidiContent">
				<p>领取方式：包邮</p>
				<p>收件人：{{shoujianren}}</p>
				<p>电话：{{kuaiditel}}</p>
				<p>地址：{{kuaidiAddress}}</p>
				<p>快递：<input type="text" placeholder="请输入快递名" v-model="kuaidiName" maxlength="100"/></p>
				<p>快递单号：<input type="text" placeholder="请输入快递单号" v-model="kuaididan" maxlength="32"/></p>
			</div>
			<div class="kuaidiBtn">
				<a @click="kuaidiSubmit1">保存</a>
				<a @click="kuaidiCancel1" class="buttonRight">取消</a>
			</div>
		</div>
		<!--已发货弹窗-->
		<div class="kuaidi" v-show="kuaidiStutas2">
			<p class="title">物流信息详情</p>
			<div class="kuaidiContent">
				<p>领取方式：包邮</p>
				<p>收件人：{{shoujianren}}</p>
				<p>电话：{{kuaiditel}}</p>
				<p>地址：{{kuaidiAddress}}</p>
				<p>快递：<input type="text" placeholder="请输入快递名" v-model="kuaidiName" maxlength="100"/></p>
				<p>快递单号：<input type="text" placeholder="请输入快递单号" v-model="kuaididan" maxlength="32"/></p>
			</div>
			<div class="kuaidiBtn">
				<a @click="kuaidiSubmit2">保存</a>
				<a @click="kuaidiCancel2" class="buttonRight">取消</a>
			</div>
		</div>
		<!--自提弹窗-->
		<div class="kuaidi" v-show="kuaidiStutas3">
			<p class="title">自提信息详情</p>
			<div class="kuaidiContent" style="margin-top: 35px;overflow: hidden;">
				<p style="margin-bottom: 15px;">领取方式：自提</p>
				<p style="margin-bottom: 15px;">电话：{{kuaiditel}}</p>
				<p style="margin-bottom: 15px;">地址：{{kuaidiAddress}}</p>
			</div>
			<div class="kuaidiBtn">
				<a @click="kuaidiSubmit3" style="margin: 20px auto 0;display: block;">确定</a>
			</div>
		</div>
		<!--已结束弹窗-->
		<div class="kuaidi" v-show="kuaidiStutas4">
			<p class="title">物流信息详情</p>
			<div class="kuaidiContent end">
				<p>领取方式：包邮</p>
				<p>电话：{{kuaiditel}}</p>
				<p>地址：{{kuaidiAddress}}</p>
				<p>快递：<input type="text" placeholder="请输入快递名" v-model="kuaidiName" readonly="readonly" style="border: 0;color:#333;font-size: 14px;height: 16px;line-height: 16px;"/></p>
				<p>快递单号：<input type="text" placeholder="请输入快递单号" v-model="kuaididan" readonly="readonly" style="border: 0;color:#333;font-size: 14px;height: 16px;line-height: 16px;" maxlength="32"/></p>
			</div>
			<div class="kuaidiBtn">
				<a @click="kuaidiSubmit4" style="margin: 20px auto 0;display: block;">确定</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				exchange:'',
//				快递状态设置start
				kuaidiStutas1:false,
				kuaidiStutas2:false,
				kuaidiStutas3:false,
				kuaidiStutas4:false,
				shoujianren:'',
				kuaidiAddress:'',
				kuaiditel:'',
				kuaidiName:'',
				kuaididan:'',
				//快递状态设置end
				search: '',
				tableData: [],
		        pagesize: 15,
		        currentpage: 1,
		        total: 1,
				allSelect: false,
				multipleSelection: [],
				value:'',
				courseType: "",
				learnStatus: "",
				searchSelect:'',
				options: [{
					value: 1,
					label: '未发货'
				},{
					value: 2,
					label: '未自提'
				},{
					value: 3,
					label: '已发货'
				},{
					value: 4,
					label: '已结束'
				}],
				companyid:'', // 全局企业id
			}
		},
		methods: {
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/shopItemOrder/shopItemOrderListQiYe",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data:{
						page: this.currentpage,
						num: this.pagesize,
						fuzzyFields: this.search,
						sellerSateCode:this.searchSelect,
						companyId:1
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			handleStatu1(row){
				//发货
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/shopItemOrder/selectPinkageInfo",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data:{id:row.id},
					success: res => {
						if(res.data.code == 200) {
							this.kuaidiStutas1 = true;
							this.shoujianren = res.data.data.realname;
							this.kuaiditel = res.data.data.telphone;
							this.kuaidiAddress = res.data.data.address;
							this.id = row.id;
						}
					}
				});
			},
			kuaidiSubmit1(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/shopItemOrder/updatePinkageInfo",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'PUT',
					data:{
						id:this.id,
						logisticsName:this.kuaidiName,
						logisticsNo:this.kuaididan,
						orderStatus:3
					},
					success: res => {
						if(res.data.code == 200) {
							this.kuaidiStutas1 = false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									this.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.kuaidiStutas1 = false;
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			kuaidiCancel1(){
				this.kuaidiStutas1 = false;
			},
			handleStatu2(row){
				//物流信息
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/shopItemOrder/selectPinkageInfo",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data:{id:row.id},
					success: res => {
						if(res.data.code == 200) {
							this.kuaidiStutas2 = true;
							this.shoujianren = res.data.data.realname;
							this.kuaidiAddress = res.data.data.address;
							this.kuaiditel = res.data.data.telphone;
							this.kuaidiName = res.data.data.logisticsName;
							this.kuaididan = res.data.data.logisticsNo;
							this.id = row.id;
						}
					}
				});
			},
			kuaidiSubmit2(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/shopItemOrder/updatePinkageInfo",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'PUT',
					data:{
						id:this.id,
						logisticsName:this.kuaidiName,
						logisticsNo:this.kuaididan
					},
					success: res => {
						if(res.data.code == 200) {
							this.kuaidiStutas2 = false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									this.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.kuaidiStutas2 = false;
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			kuaidiCancel2(){
				this.kuaidiStutas2 = false;
			},
			handleStatu3(row){
				//自提信息
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/shopItemOrder/selectTakePopupInfo",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data:{id:row.id},
					success: res => {
						if(res.data.code == 200) {
							this.kuaidiStutas3 = true;
							this.kuaidiAddress = res.data.data.address;
							this.kuaiditel = res.data.data.telphone;
						}
					}
				});
			},
			kuaidiSubmit3(){
				this.kuaidiStutas3 = false;
			},
			handleStatu4(row){
				//已结束
				if(row.fetchWay == 1){
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/shopItemOrder/selectTakePopupInfo",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data:{id:row.id},
						success: res => {
							if(res.data.code == 200) {
								this.kuaidiStutas3 = true;
								this.kuaidiAddress = res.data.data.address;
								this.kuaiditel = res.data.data.telphone;
							}
						}
					});
				}else if(row.fetchWay == 2){
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/shopItemOrder/selectPinkageInfo",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data:{id:row.id},
						success: res => {
							if(res.data.code == 200) {
								this.kuaidiStutas4 = true;
								this.shoujianren = res.data.data.realname;
								this.kuaidiAddress = res.data.data.address;
								this.kuaiditel = res.data.data.telphone;
								this.kuaidiName = res.data.data.logisticsName;
								this.kuaididan = res.data.data.logisticsNo;
							}
						}
					});
				}
			},
			kuaidiSubmit4(){
				this.kuaidiStutas4 = false;
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			deleteSubmit(){
				let list = {id:this.transitionRow.id};
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/shopItemOrder/deleteShopItemOrder",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'DELETE',
					data:list,
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
		    this.$store.commit('GET_USERINFOMSG');
            var s=this.$store.state.userInfoMsg;
            this.companyid=s.companyid;   
            this.$root.userInfoMsg=this.$store.state.userInfoMsg;
			if(this.companyid!=null){
				this.getTableList();
			}
			this.exchange = this.$root.huasan.exchange;
		}
	}
</script>

<style>
	/*快递状态弹窗*/
	.exchange .kuaidi {width:467px;height:250px;position:fixed;top:50%;left:50%;margin-top:-125px;margin-left:-233px;z-index:999;background:#fff;border:1px solid #ccc;}
	.exchange .kuaidi .title {font-size:14px;color:#333;height:30px;line-height:30px;text-align:center;border-bottom:1px solid #ccc;}
	.exchange .kuaidiContent {margin-left:25px;margin-top:15px;}
	.exchange .kuaidiContent p {font-size:14px;color:#333;margin-bottom:7px;}
	.exchange .kuaidiContent p input {width:160px;height:24px;line-height:24px;border:1px solid #f2f2f2;font-size:12px;color:#666;padding-left:10px;border-radius:5px;}
	.exchange .kuaidiContent.end p {margin-bottom:12px;}
	.exchange .kuaidi .kuaidiBtn {margin-top:7px;}
	.exchange .kuaidiBtn a {background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;color:#fff;text-align:center;border-radius:5px;cursor:pointer;margin-top:3px;margin-left:108px;font-size:14px;}
	.exchange .kuaidiBtn a.buttonRight {background:#ccc;margin-left:50px;}
	.exchange .kuaidi .kuaidiBtn.index {margin-top:70px;}
	.exchange .kuaidi .kuaidiBtn.index a,.exchange .kuaidi .kuaidiBtn.mar a {margin:0 auto;display:block;}
</style>